<template>
    <div v-html="compiledMarkdown"></div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import type { PropType } from 'vue';
import MarkdownIt from 'markdown-it';

export default defineComponent({
    name: 'MarkdownRenderer',
    props: {
        content: {
            type: String as PropType<string>,
            required: true
        }
    },
    setup(props) {
        const compiledMarkdown = computed(() => {
            const md = new MarkdownIt();
            console.log(md.render(props.content));
            return md.render(props.content);
        });

        return {
            compiledMarkdown
        };
    }
});
</script>

<style scoped></style>
